<template>
  <div class="map-container">
    <div id="map" ref="mapContainer"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import { setMapInstance } from '@/utils/mapUtils'
const mapContainer = ref<HTMLElement | null>(null)
let map: mapboxgl.Map | null = null

mapboxgl.accessToken = import.meta.env.VITE_APP_MAP_TOKEN;

onMounted(() => {
  if (!mapContainer.value) return
  map = new mapboxgl.Map({
    container: mapContainer.value,
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [116.397428, 39.90923], // 北京坐标
    zoom: 12
  })

//   const resizeObserver = new ResizeObserver((entries, observer) => {
//     // console.log('resizeObserver', entries, observer)
//     // 监听地图容器尺寸变化，触发地图重绘, 避免多次重绘
//     map.value?.resize()
//   })

//   resizeObserver.observe(mapContainer.value)

  setMapInstance(map as mapboxgl.Map)
})

onUnmounted(() => {
  map?.remove()
  map = null
})
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh;
}

#map {
  width: 100%;
  height: 100%;
}
</style> 